{extend name="public:base" /}

{block name="title"}<title>{$Think.lang.c_title}</title>{/block}

{block name="pjax_container"}
<section class="content-header">
    <h1>{$Think.lang.c_title}</h1>
</section>
<section class="content">
    <div class="row">
        <div class="col-lg-3 col-sm-6 col-xs-12">
            <div class="small-box bg-yellow">
                <div class="inner"><h3>{$data.user_total}</h3><p>{$Think.lang.user_num}</p></div>
                <div class="icon"><i class="fa fa-users"></i></div>
                <a href="{:url('User/index')}" class="small-box-footer">{$Think.lang.more} <i class="fa fa-arrow-circle-right"></i></a>
            </div>
        </div>
        <div class="col-lg-3 col-sm-6 col-xs-12">
            <div class="small-box bg-green">
                <div class="inner"><h3>{$data.archive_total}</h3><p>{$Think.lang.archive_num}</p></div>
                <div class="icon"><i class="fa fa-file-text"></i></div>
                <a href="{:url('Archive/index')}" class="small-box-footer">{$Think.lang.more} <i class="fa fa-arrow-circle-right"></i></a>
            </div>
        </div>
        <div class="col-lg-3 col-sm-6 col-xs-12">
            <div class="small-box bg-aqua">
                <div class="inner"><h3>{$data.user_near}</h3><p>{$Think.lang.new_user_num}</p></div>
                <div class="icon"><i class="fa fa-user-plus"></i></div>
                <a href="{:url('User/index')}" class="small-box-footer">{$Think.lang.more} <i class="fa fa-arrow-circle-right"></i></a>
            </div>
        </div>
        <div class="col-lg-3 col-sm-6 col-xs-12">
            <div class="small-box bg-red">
                <div class="inner"><h3>{$data.guestbook_total}</h3><p>{$Think.lang.new_guestbook_num}</p></div>
                <div class="icon"><i class="fa fa-commenting"></i></div>
                <a href="{:url('Guestbook/index')}" class="small-box-footer">{$Think.lang.more} <i class="fa fa-arrow-circle-right"></i></a>
            </div>
        </div>
        
        <div class="col-lg-6 col-sm-6 col-xs-12">
            <div class="box box-primary">
                <div class="box-header with-border">
                    <h3 class="box-title">{$Think.lang.login_30_count}</h3>
                </div>
                <div class="box-body">
                    <canvas id="login-line" height="312"></canvas>
                </div>
            </div>
        </div>
        <div class="col-lg-6 col-sm-6 col-xs-12">
            <div class="box box-primary">
                <div class="box-header">
                    <h3 class="box-title">{$Think.lang.login_new}</h3>
                </div>
                <div class="box-body no-padding">
                    <table class="table table-hover">
                        <tr>
                            <th>{$Think.lang.login_l_ip}</th>
                            <th>{$Think.lang.login_l_address}</th>
                            <th>{$Think.lang.login_l_time}</th>
                        </tr>
                        {volist name="data.login_list" id="vo"}
                        <tr>
                            <td><span class="label label-success">{$vo.ip}</span></td>
                            <td>{$vo.country} {$vo.province} {$vo.city} {$vo.district}</td>
                            <td>{$vo.create_time|time_line}</td>
                        </tr>
                        {/volist}
                    </table>
                </div>
            </div>
        </div>
        
        <div class="col-lg-6 col-sm-6 col-xs-12">
            <div class="box box-primary">
                <div class="box-header with-border">
                    <h3 class="box-title">{$Think.lang.user_l_group}</h3>
                </div>
                <div class="box-body">
                    <canvas id="user-pie" height="312"></canvas>
                </div>
            </div>
        </div>
        <div class="col-lg-6 col-sm-6 col-xs-12">
            <div class="box box-primary">
                <div class="box-header">
                    <h3 class="box-title">{$Think.lang.system_config}</h3>
                </div>
                <div class="box-body no-padding">
                    <table class="table table-hover">
                        {volist name="data.system_config" id="vo" }
                        <tr>
                            <td>{$key}：{$vo}</td>
                        </tr>
                        {/volist}
                    </table>
                </div>
            </div>
        </div>
    </div>
</section>
<script>
$(function () {
    var loginLogLineJson = {$data.login_line_json};
    var loginline = document.getElementById('login-line').getContext('2d');
    new Chart(loginline, {
        type: 'line',
        data: loginLogLineJson,
        options: {
            responsive: true,
            maintainAspectRatio: false
        }
    });
    
    var groupPieJson = {$data.group_pie_json};
    var userpie = document.getElementById('user-pie').getContext('2d');
    new Chart(userpie, {
        type: 'pie',
        data: groupPieJson,
        options: {
            responsive: true,
            maintainAspectRatio: false
        }
    });
});
</script>
{/block}